<template>
<el-dialog
  title="提示"
  :visible="dialogVisible"
  width="775px"
  @close="handleClose"
  >
 <template :model="preview">
  <el-row>
  <el-col :span="6"><div class="grid-content bg-purple">【题型】：{{ questionTyp(preview.questionType) }}</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light">【编号】：{{preview.id}}</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">【难度】：{{ difficultys(preview.difficulty)}}</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light">【标签】：{{preview.tags}}</div></el-col>
</el-row>
<br>
<br>
   <el-row>
  <el-col :span="6"><div class="grid-content bg-purple">【学科】：{{preview.subjectName}}</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light">【目录】：{{preview.directoryName}}</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">【方向】：{{preview.direction  }}</div></el-col>
</el-row>

 <el-divider></el-divider>
 <span>【题干】 ：</span>
 <p>{{ questionTyp(preview.questionType) }}题 {{userText}}</p>
 <p v-html="preview.question" class="colors"> </p><br>
 <template v-if="shows">
  <!-- 简答 -->
    <p></p>
 </template>
 <template v-else>
  <template v-if="bortrue">
<!-- 单选 -->
     <el-radio-group v-model="NumberIs" v-for="item in preview.options" :key="item.id" class="radios" @change= "changGe">
    <el-radio :label="item.isRight" >{{item.title}}</el-radio>
   </el-radio-group>
    </template>
    <template v-else>
      <!-- 多选 -->
     <el-checkbox-group  v-model="NumberIss" v-for="item in preview.options" :key="item.id" class="radios" @change= "changGes">
    <el-checkbox :label="item.isRight" >{{item.title}}</el-checkbox>
  </el-checkbox-group>
  </template>
    </template>

 <el-divider></el-divider>
 <span>【参考答案】：</span> <el-button type="danger" size="small" @click="videoOpen">视频答案预览</el-button>
 <br>
<video v-show="show" controls  autoplay name="media">
  <source  src="//bpic.588ku.com/video_listen/588ku_preview/21/11/24/19/17/12/video619e1f38394f5.mp4" type="video/mp4">
 </video>
 <el-divider></el-divider>
  <el-row>
  <el-col :span="24"> <div style="height=15px">【答案解析】：<span >{{ previewAnswer(preview.answer)}}</span></div></el-col>
  </el-row>

 <el-divider></el-divider>
 <p><span>【题目备注】：</span><span>{{preview.remarks}}</span></p>
 <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="handleClose" class="el-button el-button--primary el-button--medium">关闭</el-button>
  </span>
  </template>

</el-dialog>
</template>

<script>
import { html2Text } from '@/utils/index'
export default {
  name: 'QuestionsPreview',
  props: {
    dialogVisible: {
      type: Boolean
    },
    preview: {
      requested: true
    }

  },
  data () {
    return {
      NumberIs: 1,
      NumberIss: [1],
      show: false,
      bortrue: false,
      shows: false,
      userText: ''
    }
  },
  methods: {
    handleClose () {
      this.$emit('close')
    },

    questionTyp (tyep) {
      this.bortrue = this.roudel(tyep)
      this.roudeCheck(tyep)

      const map = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return map[tyep]
    },
    difficultys (tyep) {
      const map = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return map[tyep]
    },
    videoOpen () {
      this.show = !this.show
    },
    // 多选单选框
    roudel (type) {
      const map = {
        1: true,
        2: false,
        3: false

      }
      return map[type]
    },
    // 简答框
    roudeCheck (tyep) {
      if (tyep === '3') {
        this.shows = true
        this.userText = ''
      } else {
        this.shows = false
        this.userText = '选项：（以下选中的选项为正确答案）'
      }
    },
    changGe () {
      this.NumberIs = 1
    },
    changGes () {
      this.NumberIss = [1]
    },
    previewAnswer (type) {
      return html2Text(type)
    }
  }
}
</script>

<style scoped lang='scss'>
li{
  flex: 1;
  list-style-type:none;
}
.uls{
display: flex;
}
.colors{
  color: blue;
  font-size: 12px;
}
.dialog-footer{
position:absolute;
bottom: 10px;
right: 10px;
}
.radios{
 display: flex;
  align-items: center;

}

  </style>
